/*********************************************************************
    1、全局
*/


/*********************************************************************
    2、modal
*/

/* response modal*/
.responsive-modal .modal-dialog {
    width: 60%;
}
@media (max-width: 1366px) {
   .responsive-modal .modal-dialog {
        width: 75%;
    }
}


/*  alert modal */
.alert-modal > .modal-wrapper {
    display: table;
    width: 100%;
    height:100%
}
/*.alert-modal > .modal-wrapper >.modal-dialog {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}*/
.alert-modal > .modal-wrapper >.modal-dialog>.modal-content {
    width: 300px;
    margin: auto;
    background-color: #FFF;
    border: 1px solid #1682af;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    word-break: break-all;
    word-wrap: break-word;
    box-shadow: 0px 0px 15px #5bbfea;
    text-align: left;
}
.alert-modal > .modal-wrapper >.modal-dialog>.modal-content .modal-header {
    background-color: #DDD;
    padding: 8px;
    border-bottom: 1px solid #CCC;

}
.alert-modal > .modal-wrapper >.modal-dialog>.modal-content .modal-title {
    font-weight: bold;
}

.alert-modal > .modal-wrapper >.modal-dialog>.modal-content .modal-footer {
    padding: 0 5px;
    text-align: left;
}

.alert-modal > .modal-wrapper > .modal-dialog > .modal-content .modal-footer .btn-ok {
    float: right;
    padding: 3px 8px;
    background: #188ec0;
    color: #FFF;
    border: 1px solid #0062bb;
    border-radius: 2px;
    margin-right: 20px;
    line-height: normal;
}


/* loading */
/*  loading */
.loading-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    background: #000000;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.loading-modal .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    text-align: center;
}
.loading-modal .loading .spinner {
  height: 80px;
}
 
.loading-modal .loading .spinner > div {
  background-color: grey;
  height: 100%;
  width: 8px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.loading-modal .loading .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.loading-modal .loading .spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.loading-modal .loading .spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.loading-modal .loading .spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
/*********************************************************************